<template>
    <div>
        <el-tabs type="border-card" v-model="channelId" @tab-click="handleTabChange">
            <template v-for="(i, index) in channelList" :key="index">
                <el-tab-pane :label="i.name" :name="i.id">
                    <dataComponent v-if="i.id === channelId" :channel-id="channelId"/>
                </el-tab-pane>
            </template>
        </el-tabs>
        <div class="mg-t-20">
            <el-card>
                <quotaSetting :channel-id="channelId"/>
            </el-card>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted ,onActivated} from 'vue'
import { getChannelList } from 'api/tools/manageAccount.ts'
import dataComponent from './components/dataComponent/index.vue'
import quotaSetting from './components/quotaSetting/index.vue'

const channelList = ref([])
const channelId = ref('')

const getList = () => {
    getChannelList({
        type: 1
    }).then(res => {
        channelList.value = res?.list || []
        if (channelList.value?.length) {
            channelId.value = channelList.value[0].id
        }
    })
}

const handleTabChange = (tab, event) => {
    console.log(tab, event)
}

onMounted(() => {
    getList()
})
onActivated(() => {
    getList()
})


</script>
<style lang="scss" scoped></style>